<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  if (session.getAttribute("user") == null) {
    response.sendRedirect("../login.jsp");
    return;
  }

  String action = request.getParameter("action");
  boolean isEdit = "edit".equals(action);
  String pageTitle = isEdit ? "编辑支出" : "添加支出";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= pageTitle %> - 智能记账系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
  <style>
    .sidebar {
      background-color: #f8f9fa;
      min-height: calc(100vh - 56px);
    }
    .sidebar .nav-link {
      color: #333;
      padding: 12px 20px;
      border-radius: 5px;
      margin-bottom: 5px;
    }
    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #667eea;
      color: white;
    }
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="dashboard.jsp">
      <i class="fas fa-money-bill-wave me-2"></i>智能记账
    </a>
    <div class="navbar-nav ms-auto">
                <span class="navbar-text me-3">
                    欢迎，${user.fullName}
                </span>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
          <i class="fas fa-user-circle"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="profile.jsp"><i class="fas fa-user me-2"></i>个人信息</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="../logout"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3 col-lg-2 sidebar p-0">
      <div class="d-flex flex-column flex-shrink-0 p-3">
        <ul class="nav nav-pills flex-column mb-auto">
          <li class="nav-item">
            <a href="dashboard.jsp" class="nav-link">
              <i class="fas fa-tachometer-alt me-2"></i>仪表板
            </a>
          </li>
          <li class="nav-item">
            <a href="income.jsp" class="nav-link">
              <i class="fas fa-money-bill-wave me-2"></i>收入管理
            </a>
          </li>
          <li class="nav-item">
            <a href="expense.jsp" class="nav-link active">
              <i class="fas fa-shopping-cart me-2"></i>支出管理
            </a>
          </li>
          <li class="nav-item">
            <a href="budget.jsp" class="nav-link">
              <i class="fas fa-chart-pie me-2"></i>预算管理
            </a>
          </li>
          <li class="nav-item">
            <a href="profile.jsp" class="nav-link">
              <i class="fas fa-user me-2"></i>个人信息
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 主内容区域 -->
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2"><%= pageTitle %></h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <a href="expense.jsp" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>返回列表
          </a>
        </div>
      </div>

      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title mb-0">支出信息</h5>
            </div>
            <div class="card-body">
              <form action="../expense" method="post">
                <input type="hidden" name="action" value="<%= isEdit ? "update" : "insert" %>">
                <% if (isEdit) { %>
                <input type="hidden" name="expenseId" value="<%= request.getParameter("expenseId") %>">
                <% } %>

                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label for="amount" class="form-label">金额 *</label>
                    <div class="input-group">
                      <span class="input-group-text">¥</span>
                      <input type="number" class="form-control" id="amount" name="amount"
                             step="0.01" min="0" required
                             value="<%= isEdit ? "45.00" : "" %>">
                    </div>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label for="expenseDate" class="form-label">支出日期 *</label>
                    <input type="date" class="form-control" id="expenseDate" name="expenseDate"
                           required value="<%= isEdit ? "2025-11-05" : "" %>">
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label for="category" class="form-label">支出类别 *</label>
                    <select class="form-select" id="category" name="category" required>
                      <option value="">请选择类别</option>
                      <option value="餐饮" <%= isEdit ? "selected" : "" %>>餐饮</option>
                      <option value="购物">购物</option>
                      <option value="学习">学习</option>
                      <option value="交通">交通</option>
                      <option value="娱乐">娱乐</option>
                      <option value="医疗">医疗</option>
                      <option value="其他">其他</option>
                    </select>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label for="paymentMethod" class="form-label">支付方式</label>
                    <select class="form-select" id="paymentMethod" name="paymentMethod">
                      <option value="">请选择支付方式</option>
                      <option value="现金" <%= isEdit ? "selected" : "" %>>现金</option>
                      <option value="支付宝">支付宝</option>
                      <option value="微信支付">微信支付</option>
                      <option value="银行卡">银行卡</option>
                      <option value="校园卡">校园卡</option>
                      <option value="其他">其他</option>
                    </select>
                  </div>
                </div>

                <div class="mb-3">
                  <label for="description" class="form-label">描述</label>
                  <textarea class="form-control" id="description" name="description"
                            rows="3"><%= isEdit ? "午餐" : "" %></textarea>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                  <a href="expense.jsp" class="btn btn-secondary me-md-2">取消</a>
                  <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i>
                    <%= isEdit ? "更新支出" : "添加支出" %>
                  </button>
                </div>
              </form>
            </div>
          </div>

          <!-- 快速添加提示 -->
          <div class="card mt-4">
            <div class="card-body">
              <h6 class="card-title"><i class="fas fa-lightbulb text-warning me-2"></i>记账小贴士</h6>
              <ul class="list-unstyled mb-0">
                <li><i class="fas fa-check text-success me-2"></i>养成及时记账的好习惯</li>
                <li><i class="fas fa-check text-success me-2"></i>准确分类支出，便于分析消费结构</li>
                <li><i class="fas fa-check text-success me-2"></i>记录支付方式，了解资金流向</li>
                <li><i class="fas fa-check text-success me-2"></i>定期回顾支出，优化消费习惯</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 设置默认日期为今天
  document.getElementById('expenseDate').value = new Date().toISOString().substr(0, 10);

  // 金额输入框自动聚焦
  document.getElementById('amount').focus();
</script>
</body>
</html>